<template>
  <div class="lg-container" v-wechat-title="$route.meta.title" v-if="isTemplate">
    <van-search placeholder="请输入搜索关键词" v-model="filters.keyWord" @input="handler" />
    <van-tabs v-model="activeName" color="#03A9AC" @change="onChange" title-active-color="#03A9AC">
      <van-tab title="已处理" name="1"></van-tab>
      <van-tab title="未处理" name="0"></van-tab>
    </van-tabs>
    <van-list
      class="lg-list"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
    >
      <van-cell v-for="item in list" :key="item.id">
        <div class="recordContent" @click="goNav(item)">
          <div class="recordLeft">
            <div class="title">
              <span class="name">{{ item.name }}</span>
              <span class="icon">{{ item.formTypeShow }}</span>
            </div>
            <div class="date">{{ item.createTime | parseTime('{y}-{m}-{d}') }}</div>
          </div>
          <div
            v-if="item.type === 1"
            class="recordRight"
            :class="{ status: item.isWeChatRead === 1 }"
          >{{ item.isWeChatRead === 1 ? '已填' : '未填' }}</div>
           <div
            v-if="item.type === 2"
            class="recordRight"
            :class="{ status: item.isWeChatRead === 1 }"
          >{{ item.isWeChatRead === 1 ? '已读' : '未读' }}</div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
import { list, readInfo } from '@/api/info'
export default {
  data () {
    return {
      activeName: '1',
      isTemplate: false,
      // 表格列表
      list: [],
      // 表格总条数
      total: 0,
      // 页数、条数
      listQuery: {
        current: 1,
        pageSize: 10
      },
      // 过滤条件
      filters: {
        keyWord: '',
        patientId: null,
        isWeChatRead: 1
      },
      loading: false,
      finished: false,
      error: false
    }
  },
  created () {
    if (this.$route.query.openId) {
      this.filters.patientId = this.$route.query.openId
      this.getInfo()
    }
  },
  methods: {
    getInfo () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        overlay: true,
        duration: 0
      })
      readInfo(this.$route.query.openId).then(res => {
        this.$toast.clear()
        if (res.code === 200) {
          switch (res.status) {
            case '1':
              this.$dialog.confirm({
                title: '提示',
                message: '暂未绑定医生，请前往绑定',
                showCancelButton: false,
                confirmButtonColor: '#03A9AC'
              }).then(() => {
                this.$router.push('/infoBound?openId=' + this.$route.query.openId)
              }).catch(() => {
              })
              break
            case '2':
              setTimeout(() => {
                this.$router.push('/establishStatus?openId=' + this.$route.query.openId)
              }, 1000)
              break
            case '3':
              this.isTemplate = true
              break
            default:
              this.isTemplate = true
              break
          }
        }
      })
    },
    onChange (val) {
      this.filters.isWeChatRead = parseInt(this.activeName)
      this.handler()
    },
    onLoad () {
      setTimeout(() => {
        this.getList()
      }, 500)
    },
    handler () {
      this.listQuery.current = 1
      this.finished = false
      this.loading = true
      this.list = []
      this.onLoad()
    },
    getList () {
      const data = Object.assign({}, this.listQuery, this.filters)
      list(data).then(res => {
        if (res.code === 200) {
          // 数据全部加载完成
          if (res.list.length < 10) {
            this.finished = true
          }
          // 初始列表未空
          if (this.listQuery.current === 1) {
            this.list = []
          }
          this.list.push(...res.list)
          this.listQuery.current++
          this.loading = false
        } else {
          this.loading = false
          this.finished = true
        }
      }).catch(() => {
        this.loading = false
        this.finished = false
        this.error = true
      })
    },
    goNav (data) {
      this.$router.push('/userForm?id=' + data.id + '&isPlan=1')
    }
  }
}
</script>
<style lang="scss">
  .lg-list {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    .van-cell {
      border-radius: 4px;
      margin-bottom: 15px;
    }
  }
</style>
<style lang="scss" scoped>
.lg-container {
  width: 100vw;
  min-height: 100vh;
  background-color: #f4f4f4;
  .recordContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .recordLeft {
      display: flex;
      flex-direction: column;
      .title {
        display: flex;
        align-items: center;
        .name {
          width: 150px;
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .icon {
          margin-left: 10px;
          color: #fff;
          background: #81d4d5;
          padding: 3px 10px;
          line-height: 10px;
          border-radius: 15px;
          font-size: 12px;
        }
      }
      .date {
        color: #888;
        margin-top: 5px;
      }
    }
    .recordRight {
      font-size: 12px;
      line-height: 16px;
      padding: 2px 10px;
      box-sizing: border-box;
      color: #bcbcbc;
      border: 1px solid #bcbcbc;
    }
    .status {
      color: #fdbb59;
      border: 1px solid #fdbb59;
    }
  }
}
</style>
